<template>
  <div class="word-container">
    <!-- 劳动合同 -->
    <labor :data="form" />

    <!-- 表单 -->
    <div class="clause-container">
      <h3 class="p-ver-sm">操作：</h3>
      <el-button type="primary" size="medium" icon="el-icon-document" @click="view">预览并打印</el-button>

      <h3 class="p-ver-sm m-top-sm">合同信息：</h3>
      <el-form ref="form" class="form" :model="form" :rules="formRules">
        <el-form-item label="甲方名称" prop="company1">
          <el-input v-model="form.company1" placeholder="甲方名称" />
        </el-form-item>
        <el-form-item label="乙方名称" prop="company2">
          <el-input v-model="form.company2" placeholder="乙方名称" />
        </el-form-item>
        <el-form-item label="采取方式" prop="way">
          <el-select v-model="form.way" placeholder="采取方式" @change="waySelectChange">
            <el-option label="方式（一）" value="1" />
            <el-option label="方式（二）" value="2" />
            <el-option label="方式（三）" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.way === '1'" label="固定期限">
          <el-date-picker
            style="width: 100%"
            v-model="way1"
            type="daterange"
            unlink-panels
            range-separator="至"
            format="yyyy年M月d日"
            value-format="yyyy年M月d日"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="way1Change"
          />
        </el-form-item>
        <el-form-item v-show="form.way === '2'" label="无固定期限">
          <el-date-picker
            style="width: 100%"
            v-model="form.way2Start"
            format="yyyy年M月d日"
            value-format="yyyy年M月d日"
            placeholder="开始日期"
          />
        </el-form-item>
        <el-form-item v-show="form.way === '3'" label="完成一定生产工作任务">
          <el-date-picker
            style="width: 100%"
            v-model="way3"
            type="daterange"
            unlink-panels
            range-separator="至"
            format="yyyy年M月d日"
            value-format="yyyy年M月d日"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="way3Change"
          />
        </el-form-item>
        <el-form-item v-show="form.way === '1' || form.way === '2'" label="试用期">
          <el-date-picker
            style="width: 100%"
            v-model="way"
            type="daterange"
            unlink-panels
            range-separator="至"
            format="yyyy年M月d日"
            value-format="yyyy年M月d日"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="wayChange"
          />
        </el-form-item>
        <el-form-item label="岗位（工种）" prop="jobName">
          <el-input v-model="form.jobName" placeholder="岗位（工种）" />
        </el-form-item>
        <el-form-item label="工作地点" prop="jobAddress">
          <el-input v-model="form.jobAddress" placeholder="工作地点" />
        </el-form-item>
        <el-form-item label="工作制" prop="workTime">
          <el-input-number style="width: 100%" v-model="form.workTime" :min="0" :max="24" label="工作制" />
        </el-form-item>
        <el-form-item label="工资" prop="salary">
          <el-input-number style="width: 100%" v-model="form.salary" :min="0" :precision="2" :step="500" label="工资" />
        </el-form-item>
        <el-form-item label="试用期工资" prop="salary2">
          <el-input-number style="width: 100%" v-model="form.salary2" :min="0" :precision="2" :step="500" label="试用期工资" />
        </el-form-item>
        <el-form-item label="工资发放日" prop="payDay">
          <el-select v-model="form.payDay" placeholder="工资发放日">
            <el-option
              v-for="n of 31"
              :key="'payday-' + n"
              :label="`每月${n}日`"
              :value="n"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="补充保险和福利待遇" prop="boon">
          <el-input v-model="form.boon" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="补充保险和福利待遇" />
        </el-form-item>
        <el-form-item label="双方约定的其他事项" prop="other">
          <el-input v-model="form.other" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="双方约定的其他事项" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import printJS from 'print-js';
import dayjs from '@/assets/plugins/dayjs';
import Labor from '@/components/Standard/Labor';

export default {
  name: 'home',
  components: {Labor},
  data() {
    return {
      form: {
        company1: '',
        company2: '',

        way: '',
        way1Start: '',
        way1End: '',
        way2Start: '',
        way3Start: '',
        way3End: '',
        wayStart: '',
        wayEnd: '',

        jobName: '',
        jobAddress: '',

        workTime: 8,
        salary: '',
        salary2: '',
        payDay: '',

        boon: '',

        other: '',

        time1: '',
        time2: ''
      },
      way1: [],
      way3: [],
      way: []
    };
  },
  created() {
    this.form.time1 = this.form.time2 = dayjs().format('YYYY年M月D日');
  },
  computed: {
    formRules() {
      return {
        company1: [
          {required: true, message: '请输入甲方', trigger: 'change'}
        ],
        company2: [
          {required: true, message: '请输入乙方', trigger: 'change'}
        ]
      };
    }
  },
  methods: {
    waySelectChange() {
      this.way1Change([]);
      this.form.way2Start = '';
      this.way3Change([]);
      this.wayChange([]);
    },
    way1Change(value) { this.setWayTime('1', value); },
    way3Change(value) { this.setWayTime('3', value); },
    wayChange(value) { this.setWayTime('', value); },
    setWayTime(i, value) {
      this[`way${i}`] = value;
      this.form[`way${i}Start`] = value[0] || '';
      this.form[`way${i}End`] = value[1] || '';
    },

    printContract() {
      this.$nextTick(() => {
        printJS('contract', 'html');
      });
    },

    view() {
      this.$refs.form.validate(result => {
        if (result) {
          let data = this.form;
          this.$router.push({
            name: 'contractViewStandard',
            params: {
              data
            }
          });
        } else {
          this.$message({
            type: 'warning',
            message: '请输入必填信息'
          });
        }
      });
    }
  }
};
</script>
